<template>
    <div class="box">
        <div class="boxTop">
            <span class="iconfont icon-fanhui" @click="onClickBack"></span>
            <span class="iconfont icon-fenxiangtianchong" @click="onClickShare"></span>
            <span class="iconfont icon-shoucang1" @click="onClickCollect" ref="collect"></span>
            <span class="iconfont icon-gengduo"></span>
        </div>
    </div>

    <div class="boxCenter" v-for="item, index in restaurantCardList" :key="item.uid">
        <div class="centerTop">
            <img :src="item.shopHead" alt="">

            <div class="Top1">
                <span class="sp1">品牌</span>
                <span class="sp2">{{ item.brand }}<b class="b1">保</b><b class="b2"> 票</b></span>
            </div>

            <div class="Top2">
                <span class="star"><van-rate v-model="item.goodReview" readonly allow-half :size="10"
                        color="rgba(253, 178, 70, 1)" /></span>
                <span class="starVal">{{ item.goodReview }}</span>
                <span class="sale">月售{{ item.MonthlySales }}单</span>
                <i class="i1">
                    准时达
                </i>
                <i class="i2">
                    蜂鸟专送
                </i>
            </div>
        </div>
        <p class="delivery"><span class="sp3">￥{{ item.min }}起送&nbsp;|&nbsp;配送费￥{{ item.Delivery }}&nbsp;|&nbsp;￥{{
                item.money
        }}一人</span>
            <span class="sp4">{{ item.distance }}km&nbsp;|&nbsp;{{ parseInt(item.distance / 4.32 * 60) }}分钟</span>
        </p>

        <div class="address">
            <ul>
                <li class="li1">
                    <span class="sp1"><span class="sp2">减</span> {{ fullDecrement }} </span>
                    <span class="sp3 iconfont">4个活动&#xe771;</span>
                </li>
                <li class="li2"><span class="sp1">折</span><span class="sp2">{{ discount }}</span></li>
                <li class="li3"><span class="iconfont icon-dizhi"></span><span class="sp1">
                        {{ item.address }}</span></li>
            </ul>
        </div>

        <div>
            <van-tabbar v-model="active" route>
                <van-tabbar-item to="/discount" replace>优惠信息</van-tabbar-item>
                <van-tabbar-item to="/usercomments" replace>用户评论</van-tabbar-item>
                <van-tabbar-item to="/merchant" replace>商家信息</van-tabbar-item>
            </van-tabbar>
            <router-view></router-view>
        </div>

    </div>


    <!-- 分享的弹出层 -->
    <van-share-sheet placement="left-end" v-model:show="showShare" title="立即分享给好友" :options="options" />
</template>

<script setup>
import { getRestaurantCard } from '@/api/api.js'
import { ref, onMounted, computed } from 'vue'
import { showToast } from 'vant';
import router from '@/router'
const restaurantCardList = ref([])
const arr = ref('')
// 在挂载是后获取接口数据
onMounted(async () => {
    let uid = localStorage.getItem('uId')
    if (!Boolean(uid) || !uid) {
        showToast({ message: '参数无效' })
        router.back()
        return storage.removeItem(uid);
    }
    let { data, message, status } = await getRestaurantCard({ id: uid })
    if (status == 200) {
        showToast({ message })
        restaurantCardList.value = data
        arr.value = restaurantCardList.value[0].activity
    }
})
// 计算满减
const fullDecrement = computed(() => arr.value.split('&')[0])
// 计算折扣
const discount = computed(() => arr.value.split('&')[1])


// const value = ref(4)
// 点击返回，
const collect = ref()
const onClickBack = () => history.back();
const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
];
// 点击分享，分享弹出层显示
const onClickShare = () => showShare.value = true
// 点击收藏，图标变为红色并加入收藏
const count = ref(0)
const onClickCollect = () => {
    count.value++
    if (count.value % 2 == 0) {
        collect.value.style.color = null
        showToast({
            message: '取消收藏',

        })
    } else {
        collect.value.style.color = 'red'
        showToast({
            message: '收藏成功',

        })
    }

}

</script>

<style lang="scss" scoped>
.boxTop {
    line-height: 85px;
    width: 100%;
    position: fixed;
    top: 0;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 28px;
    border: rgba(243, 243, 243, 1) solid 2px;
    display: flex;
    flex: 1;
    align-items: center;
    overflow: hidden;
    z-index: 100;




    .iconfont {
        font-size: 48px;
        color: rgba(166, 166, 166, 1);
        margin-left: 25px;
    }

    .icon-fenxiangtianchong {
        margin-left: 450px;
    }
}

.boxCenter {
    // padding-left: 32px;
    display: flex;
    // flex: 1;
    width: 100%;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 105px;
    // overflow-y: scroll;
    height: 100%;
    overflow-y: scroll;

    .centerTop {
        box-sizing: border-box;
        font-size: 14px;
        padding-left: 32px;

        img {
            float: left;
            width: 100px;
            height: 100px;
        }

        .Top1 {
            display: flex;
            align-items: center;
            margin-bottom: 10px;

            .sp1 {
                display: inline-block;
                width: 68px;
                height: 45px;
                line-height: 45px;
                color: rgba(255, 255, 255, 1);
                background-color: rgba(255, 141, 26, 1);
                border-radius: 23px;
                font-size: 28px;
                margin: 0 12px 0 26px;
                text-align: center;
            }

            .sp2 {
                font-size: 28px;

                .b1 {
                    width: 28px;
                    height: 28px;
                    display: inline-block;
                    margin-left: 260px;
                    color: rgba(255, 141, 26, 1);
                    border-radius: 16px;
                    border: 1px solid rgba(255, 141, 26, 1);
                    font-size: 18px;
                    line-height: 28px;
                    text-align: center;
                }

                .b2 {
                    display: inline-block;
                    width: 28px;
                    height: 28px;
                    color: rgba(255, 141, 26, 1);
                    border-radius: 16px;
                    border: 1px solid rgba(255, 141, 26, 1);
                    font-size: 18px;
                    line-height: 28px;
                    text-align: center;
                    margin-left: 10px;
                }
            }
        }

        .Top2 {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .star {
                margin-left: 21px;
            }

            .starVal {
                margin-left: 10px;
                font-size: 20px;
            }

            .sale {
                margin-left: 5px;
                font-size: 20px;
            }

            .i1 {
                line-height: 38px;
                display: flex;
                align-items: center;
                color: rgba(255, 141, 26, 1);
                border: 1px solid rgba(255, 141, 26, 1);
                border-radius: 16px;
                font-style: normal;
                margin-left: 20px;
                font-size: 18px;
                text-align: center;
            }

            .i2 {
                display: flex;
                align-items: center;
                font-style: normal;
                line-height: 32px;
                color: rgba(255, 255, 255, 1);
                background-color: rgba(255, 141, 26, 1);
                border-radius: 18px;
                line-height: 38px;
                margin-right: 29px;
                font-size: 18px;
                border: 1px solid rgba(255, 141, 26, 1);
                text-align: center;
            }
        }
    }

    .delivery {
        display: flex;
        justify-content: space-between;
        font-size: 23px;
        margin-top: 5px;


        .sp3 {

            margin-left: 160px;
        }

        .sp4 {
            margin-right: 29px;
        }
    }

    .address {
        margin: 0 0 60px 52px;

        ul {
            display: flex;
            flex-direction: column;
            margin-top: 35px;

            .li1 {
                color: rgba(166, 166, 166, 1);
                font-size: 23px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;


                .sp1 {
                    color: rgba(166, 166, 166, 1);
                    font-size: 23px;

                    .sp2 {
                        display: inline-block;
                        text-align: center;
                        width: 28px;
                        line-height: 28px;
                        color: rgba(255, 255, 255, 1);
                        background-color: rgba(255, 141, 26, 1);
                        border-radius: 50%;
                        margin-right: 5px;
                    }
                }

                .sp3 {
                    margin-right: 29px;
                    font-size: 23px;
                }
            }

            .li2 {
                color: rgba(166, 166, 166, 1);
                font-size: 23px;
                margin-bottom: 20px;

                .sp1 {
                    display: inline-block;
                    width: 28px;
                    color: rgba(255, 255, 255, 1);
                    background-color: rgba(255, 141, 26, 1);
                    border-radius: 50%;
                    text-align: center;
                    line-height: 28px;
                    margin-right: 5px;

                }

                .sp2 {
                    color: rgba(166, 166, 166, 1);
                    font-size: 23px;
                    // line-height: 48px;
                }
            }

            .li3 {
                color: rgba(56, 56, 56, 1);
                font-size: 22px;
                width: 650px;

                .icon-dizhi {
                    color: rgba(255, 141, 26, 1);
                    font-size: 28px;
                }

                .sp1 {
                    height: 66px;
                    color: rgba(56, 56, 56, 1);
                    line-height: 150%;
                }
            }
        }
    }

}

.van-tabbar--fixed {
    position: static;
}

.van-tabbar-item--active {
    color: #ff8d1a;
    border-bottom: 5px solid #ff8d1a;
}
</style>
<style lang="scss" >
.van-rate__item {
    width: 20px;

}
</style>